import React, { Component } from "react";
import { PullToRefresh, ListView } from "antd-mobile";
import styled from "styled-components";
const LikeListWrap = styled.div`
    margin-top:10px;
    width:100%;
    background-color:#fff;
    h2 {
        font-size: 16px;
        font-weight: 700;
        padding: 10px 15px;
        border-bottom: 1px solid #f1f1f1;
    }
`;
class LoadMore extends Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });
        this.state = {
            data: [], //存放数据
            pageIndex: 0, //当前页面
            maxlen: 0,
            dataSource,
            isLoading: true,
            hasMore: true,
            height: document.documentElement.clientHeight,
        };
    }
    genData() {
        let { params, httpDatas } = this.props;
        let pageIndex = this.state.pageIndex;
        httpDatas({ ...params, pageIndex }).then((res) => {
            let data = [...this.state.data, ...res.data];
            pageIndex++;
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(data),
                isLoading: false,
                pageIndex: pageIndex++,
                data: data,
                maxlen: res.maxlen,
            });
            if (data.length >= res.maxlen) {
                this.setState({ hasMore: false });
            }
        });
    }
    componentDidMount() {
        this.genData();
    }
    onEndReached = (event) => {
        let len = this.state.dataSource._cachedRowCount;
        let { maxlen } = this.state;
        if (len >= maxlen) {
            this.setState({ hasMore: false });
            return;
        }
        if (this.state.isLoading) {
            return;
        }
        this.setState({ isLoading: true });
        this.genData();
    };
    onRefresh = () => {
        this.setState({ isLoading: true, hasMore: true, data: [], pageIndex: 0 });
        this.genData();
    };
    render() {
        let { ShowListUl, config = {} } = this.props;
        let { header } = config;
        const row = (rowData, sectionID, rowID) => {
            return <ShowListUl i={rowData} index={rowID} />;
        };
        return this.state.data.length
            ? (<LikeListWrap>
                {header ? <h2> {header} </h2> : ""}
                <ListView
                    ref={(el) => (this.lv = el)}
                    dataSource={this.state.dataSource}
                    renderFooter={() => (
                        <div style={{ padding: 10, textAlign: "center" }}>
                            {this.state.isLoading
                                ? "Loading..."
                                : this.state.hasMore
                                    ? "下拉加载"
                                    : "没有更多数据"}
                        </div>
                    )}
                    useBodyScroll={true}
                    renderRow={row}
                    style={{
                        background: "#ffffff",
                        margin: "0px 0",
                        padding: " 0px 0 60px 0",
                    }}
                    pullToRefresh={<PullToRefresh onRefresh={this.onRefresh} />}
                    onEndReached={this.onEndReached}
                    pageSize={5}
                />
            </LikeListWrap>
            ) : ""
    }
}
export default LoadMore;
